<% layout('layout/appLayout') %>
<% block('header').append(`<style>
.navside {
    width: 81px;
    position: fixed;
    top: 0px;
    font-size: 13px;
    height: 100%;
    left: 0;
    bottom: 55px;
    background: #FFF;
    overflow-y: auto;
    padding-top:20px;
}
.navside .navside_ul{
  list-style:none;
}
.navside .navside_ul .navside_item{
  font-size:14px;
    height: 40px;
    text-align:center;
    line-height:40px;
}
.navside_item a{
  color:#131313;
  display:block;
  height:100%;
}
.navside_item.active a{
  background:#04BE02;
  color:#FFF;
  font-weight:bold;
}
.goods_list_ul {
  list-style:none;
}
.goods_list_ul li {
    float: left;
    width: 50%;
    margin-bottom: 5px;
}
.goods_list_ul li a {
  border:1px solid #e3e3e3;
  background:#FFF;
  display:block;
  margin-left:5px;
  color:#656565;
}
.goods_list_ul .goods_img {
  padding-top:100%;
  background-size:cover;
}
</style>`)%>
<div class="page has_tab ">
  <div class="page__hd weui-flex">
    <div class="weui-search-bar <%=query.search?'weui-search-bar_focusing':'' %>" id="searchBar" style="width: 100%;    line-height: 22px;">
      <form id="formSearch" class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" name="search" class="weui-search-bar__input" id="searchInput" value="<%=query.search || '' %>" placeholder="搜索" required="">
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
          <i class="weui-icon-search"></i>
          <span>搜索</span>
        </label>
      </form>
      <a id="toSearch" href="javascript:" class="weui-search-bar__cancel-btn" >搜索</a>
    </div>
  </div>
  <div class="navside has_head" style="padding-top: 44px;">
    <ul class="navside_ul">
      <li class="navside_item <%=!query.catalog?' active':''%>"  >
        <a href="/app/type" >全部商品</a>
       </li>
      <% goodTypes.forEach(function(item) { %>
      <li class="navside_item <%=query.catalog === item.name?' active':'' %>" >
        <a href="?catalog=<%=item.name %>" ><%=item.nameCn %></a>
      </li>
      <% }) %>
    </ul>
  </div>
  <div class="page__bd has_head">
    <% if(frontInfo.notice && frontInfo.notice.isValid ===1) { %>
      <div class="light-bg fs14 padding alert alert-warning alert-dismissible" style=" padding-left: 90px;background-color: #fcf8e3;border-color: #faebcc;color: #8a6d3b;" role="alert">
        <%= frontInfo.notice && frontInfo.notice.value %>
      </div>
    <% } %>
    <div style="padding-left:81px;padding-top:10px;padding-right:5px;">
      <% if(goods && goods.length === 0) { %>
      	<div class="text-center text-muted" style="padding-top:40%;">
          <i class="iconfont icon-box" style="font-size:36px;"></i>
          <p>没有找到任何商品</p>
        </div>
      <% } %>
      <ul id="goodsList" class="goods_list_ul clearfix" style="">
        <% goods.forEach(function(item){  %>
        <li class="goods_item">
          <a href="/app/goods/detail/<%=item._id %>" class="thumbnail">
            <div class="goods_img lazy"  data-original="<%=item.imgTmb %>"  style="background:#f0f0f0 no-repeat center;background-size:cover;"></div>
            <p class="padding-left5 fs14 dot"><%=item.name%></p>
            <p class="padding-left5 fs16 weui-cell_warn">￥<%=item.sellPrice%></p>
          </a>
        </li>
        <% }) %>
      </ul>
      <div class="weui-loadmore">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
      </div>
    </div>
  </div>
</div>
<% block('footer').append(`<script id="goodsItem" type="text/template" >
<@ list.forEach(function(item){ @>
<li class="goods_item">
  <a href="/app/goods/detail/<@=item._id @>" class="thumbnail">
    <div class="goods_img" style="background:url('<@=item.imgTmb @>') no-repeat center;background-size:cover;"></div>
    <p class="padding-left5 fs14 dot"><@=item.name @></p>
    <p class="padding-left5 fs16 weui-cell_warn">￥<@=item.sellPrice@></p>
  </a>
</li>
<@ }) @>
</script>`) %>
<% block('footer').append(`<script src='/js/jquery.lazyload.min.js'></script>`)%>
<% block('footer').append(`<script>
jQuery(function(){

	$("div.lazy,li.lazy").lazyload({effect: "fadeIn"});
	var catalog = '${query.catalog || ''}'
	var search = '${query.search || ''}'
	var len = ${goods.length}

	var $body = $(document.body)
	var $curr = $('#goodsList')
  var goodsItemCompile = _.template($('#goodsItem')[0].innerHTML)
  function init() {
		$curr.data('page',1)
    if(len <=10) {
      loadingStop($curr)
    }
  }
  init()

  function loading ($curr) {
    $curr.next('.weui-loadmore').removeClass('weui-loadmore_line').find('.weui-loading').show().next().text('加载数据中')
  }

  function loadingStop ($curr) {
    $curr.next('.weui-loadmore')
    .addClass('weui-loadmore_line').
    find('.weui-loading')
    .hide().next().text('没有更多数据！')
  }
  function getData($curr,page, cb) {
  	if( parseInt(page) === 1) {
  		loading($curr)
  	}
  	$curr.data('page',page)
    $.get('/app/type', {page:page, catalog: catalog, search: search}).done(function(res) {
      var resData = res.data
      if (resData.goods.length < 10){
      	loadingStop($curr)
      	$curr.data('stop', true)
      }
      $curr.append(goodsItemCompile({list:resData.goods}))
      cb && cb()
    })
  }
  $body.infinite().on("infinite", function() {
    var self = this;
    var $self = $(self)
    if(self.loading) return;
    self.loading = true;
    if($curr.data('stop') === true) {
    	return loadingStop($curr)
    }
    loading($curr)
    getData($curr,parseInt($curr.data('page')+1), function() {
        self.loading = false
    })
  });

  $('#toSearch').on('click',function () {
     $('#formSearch').submit()
  })
})
</script>`)%>